<template>
    <div class="page_container">
        <DataTableBar :data="tableData" :columns="columns" :config="config"
            :total="total" :pages="pages" :loading="loading"
            @search="search" @reset="searchReset" @refresh="refresh"
            @currentChange="currentChange" @sizeChange="sizeChange"
            @confirm="edit">
            <template v-slot:updateTime="scope">
                <span>{{ scope.row.updateTime ? formatDate.dateTimeAllFormat( scope.row.updateTime ) : '-' }}</span>
            </template>
        </DataTableBar>
    </div>
</template>

<script setup>
    // 员工档案维护
    import { ref, onMounted } from "vue";
    import { ElMessage } from 'element-plus'
    import { formatDate } from "@/utils/fomart"
    import { empFilePages, editEmpFile} from "@/api/archives/empfile"
    import DataTableBar from "@/components/DataComponents/DataTableBar.vue"
    const pages = ref({ page_current: 1, page_size: 10 });
    const total = ref(0);
    const loading = ref(false);
    const searchParams = ref({});
    const tableData = ref([]);
    const columns = ref([
        { title: '姓名',key: 'name', minWidth: 120, search: true,},
        { title: '身份证号码', key: 'idCard', minWidth: 180, },
        { title: '档案编号',key: 'dossierNo', minWidth: 140, formShow: true, formSpan: 24, },
        { title: '档案柜',key: 'dossierCabinetNo', minWidth: 140, formShow: true, formSpan: 24,},
        { title: '备注',key: 'dossierRemark', minWidth: 140, formShow: true, formType: 'textarea', formSpan: 24, },
        { title: '更新时间',key: 'updateTime', minWidth: 160, tableCustom: true, },
    ]);
    const config = ref({
        index: true,
        addBtnHide: true,
        removeBtnHide: true,
        operBarHide: true,
        editCustom: false,
        labelPosition: 'top',
        rules: {
            dossierNo: { required: true, trigger: ['blur'], message: '请输入档案编号' },
            dossierCabinetNo: { required: true, trigger: ['blur'], message: '请输入档案柜' },
            dossierRemark: { required: true, trigger: ['blur'], message: '请输入备注' },
        },
    });
    const edit = (fromData) => {
        editEmpFile({
            ...fromData.value
        }).then( res => {
            ElMessage({ type: 'success', message: '编辑成功', })
            getTablePages();
        });
    };
    const currentChange = (current) => {
        pages.value.page_current = current;
        getTablePages();
    };
    const sizeChange = (size) => {
        pages.value.page_size = size;
        getTablePages();
    };
    const refresh = () => {
        getTablePages();
    };
    const search = (searchParam) => {
        searchParams.value = searchParam.value;
        getTablePages();
    }
    const searchReset = () => {
        searchParams.value = {};
        getTablePages();
    };
    const getTablePages = () => {
        loading.value = true;
        empFilePages({
            current: pages.value.page_current,
            size: pages.value.page_size,
            ...searchParams.value
        }).then(res => {
            tableData.value = res.data.records;
            total.value = res.data.total;
            loading.value = false;
        });
    };
    onMounted(() => { getTablePages(); })
</script>
<style scoped lang="scss">
</style>